<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>消息</title>
</head>

<body>
    <div id="message" class="center">
        <!-- 左侧导航栏,信息类别 -->
        <div v-show="!isChat" class="leftNav ui list" @click="isChat = false">
            <div class="active item">
                <i class="envelope icon"></i>
                <div class="content">
                    <a>消息</a>
                </div>
            </div>
            <div class="item">
                <i class="user plus icon"></i>
                <div class="content">
                    <a>关注</a>
                </div>
            </div>
            <div class="item">
                <i class="comment icon"></i>
                <div class="content">
                    <a>评论</a>
                </div>
            </div>
            <div class="item">
                <i class="heart icon"></i>
                <div class="content">
                    <a>喜欢</a>
                </div>
            </div>
        </div>
        <!-- 右侧消息列表 -->
        <div v-show="!isChat" class="messageList">
            <!-- 消息&聊天 -->
            <div style="display: block;">
                <!-- 展示关注用户列表 -->
                <div>
                    <ul v-if="followers">
                        <li v-for="f in followers" @click="chat(f.authorId)">
                            <div class="center">
                                <a :href="'/user/' + f.userId">
                                    <div class="headImage" :style="{'background-image':'url(' + f.headImage + ')'}">
                                        {{f.name}}
                                    </div>
                                </a>
                                <div>
                                    <p class="articleTitle">
                                        您关注了
                                    </p>
                                    <span class="small gray">{{f.createTime}}</span>
                                </div>
                                <div style="width: 68%;">
                                    <i class="chevron down icon">
                                        <ul>
                                            <li>
                                                <div class="center">
                                                    <i class="ban icon"></i>
                                                    <div>加入黑名单</div>
                                                </div>
                                            </li>
    
                                            <li>
                                                <div class="center">
                                                    <i class="exclamation triangle icon"></i>
                                                    <div>举报</div>
                                                </div>
                                            </li>
                                        </ul>
                                    </i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
            <!-- 关注 -->
            <div>
                <ul v-if="fans">
                    <li v-for="f in fans" @click="chat(f.userId)">
                        <div class="center">
                            <a :href="'/user/' + f.userId">
                                <div class="headImage" :style="{'background-image':'url(' + f.headImage + ')'}">
                                    {{f.name}}
                                </div>
                            </a>
                            <div>
                                <p class="articleTitle">
                                    关注了您
                                </p>
                                <span class="small gray">{{f.createTime}}</span>
                            </div>
                            <div style="width: 68%;">
                                <i class="chevron down icon">
                                    <ul>
                                        <li>
                                            <div class="center">
                                                <i class="ban icon"></i>
                                                <div>加入黑名单</div>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="center">
                                                <i class="exclamation triangle icon"></i>
                                                <div>举报</div>
                                            </div>
                                        </li>
                                    </ul>
                                </i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 评论 -->
            <div>
                <ul v-if="comments">
                    <li v-for="c in comments">
                        <div class="center">
                            <a :href="'/user/' + c.userId">
                                <div class="headImage" :style="{'background-image':'url(' + c.headImage + ')'}">
                                    {{c.name}}
                                </div>
                            </a>
                            <div style="width: 68%;">
                                <p class="articleTitle">
                                    在文章
                                    <a :href="'/articleDetail/'+c.articleId">《{{c.title}}》</a>
                                    中评论了您
                                </p>
                                <span class="small gray">{{c.createTime}}</span>

                                <p class="content">{{c.content}}</p>
                                <div class="center">
                                    <div class="center">
                                        <i class="comment icon"></i>
                                        <div class="content">
                                            <a href="#">回复</a>
                                        </div>
                                    </div>
                                    <div class="center">
                                        <i class="comment icon"></i>
                                        <div class=" content">
                                            <a href="#">查看会话</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 喜欢 -->
            <div>
                <ul v-if="likes">
                    <li v-for="l in likes">
                        <div class="center">
                            <a :href="'/user/' + l.userId">
                                <div class="headImage" :style="{'background-image':'url(' + l.headImage + ')'}">
                                    {{l.name}}
                                </div>
                            </a>
                            <div style="width: 68%;">
                                <p class="articleTitle">
                                    赞了您的文章
                                    <a :href="'/articleDetail/'+l.articleId">《{{l.title}}》</a>
                                </p>
                                <span class="small gray">{{l.createTime}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <!-- 点击后显示聊天详情 -->
        <div v-show="isChat" class="chat">
            <div class="center top">
                <div class="center back" @click="isChat = false">
                    <i class="reply icon"></i>
                    <div class="content">
                        <span>返回</span>
                    </div>
                </div>
                <p class="large" v-if="responseUser">与{{responseUser.name}}聊天</p>
                <div>
                    <i class="chevron down icon">
                        <ul>
                            <li>
                                <div class="center">
                                    <i class="ban icon"></i>
                                    <div>加入黑名单</div>
                                </div>
                            </li>

                            <li>
                                <div class="center">
                                    <i class="exclamation triangle icon"></i>
                                    <div>举报</div>
                                </div>
                            </li>
                        </ul>
                    </i>
                </div>
            </div>
            <!-- 聊天消息 -->
            <div class="communicates">
                <ul v-if="communicates">
                    <li v-for="c in communicates">
                        <div class="center left" v-if="loginUser.userId != c.responseUserId">
                            <a :href="'/user/' + loginUser.userId">
                                <div class="headImage" :style="{'background-image':'url(' + loginUser.headImage + ')'}">
                                    {{loginUser.name}}
                                </div>
                            </a>
                            <div>
                                <p class="small gray">{{c.createTime}}</p>
                                <p>{{c.content}}</p>
                            </div>
                        </div>
                        <div class="center right" v-else>
                            <div>
                                <p class="small gray">{{c.createTime}}</p>
                                <p>{{c.content}}</p>
                            </div>
                            <a :href="'/user/' + responseUser.userId">
                                <div class="headImage"
                                    :style="{'background-image':'url(' + responseUser.headImage + ')'}">
                                    {{responseUser.name}}
                                </div>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 聊天窗口 -->
            <div class="chatWindow">
                <div class="center">
                    <textarea class="prompt" type="text" placeholder="友善发言，温暖你我..." id="input"></textarea>
                </div>
                <div class="center">
                    <p class="gray">enter键直接发送</p>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/message.js"></script>
    <link rel="stylesheet" href="/css/message.css">
</body>

</html>